<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考拉海购</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/fixed.css">
    <link rel="stylesheet" href="./css/top.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- 头部 -->
    <div id="header">
        <!-- 1、广告位置 -->
        <div class="ad">
            <a href="#">
                <img src="./img/ad-banner.jpg" alt="">
            </a>
        </div>

        <!-- 2、导航栏 -->
        <div class="nav">
            <div class="wrap">
                <!-- 左侧 -->
                <div class="nav-left">
                    <div class="welcome">
                       考拉欢迎你！    
                    <!-- <span class="welcome">考拉欢迎你！</span>               -->
                    </div>
                    <div class="account">
                        <a href="#">登录</a>
                        <a href="#">免费注册</a>
                        <a href="#">
                            <span>手机考拉</span>
                            <span class="code">
                                <span class="arrow"></span>
                                <img src="./img/qrcode-app.png" alt="">
                                <span>新人下载APP</span>
                                <span>满10元领满减红包</span>
                            </span>
                        </a>
                    </div>
                </div>
                <!-- 右侧 -->
                <div class="nav-right">
                    <div class="group2">
                        <a href="#">个人中心
                            <i></i>
                        </a>
                        <a href="#">客户服务
                            <i></i>
                        </a>
                        <a href="#">充值中心
                            <i></i>
                        </a>
                        <a href="#">消费者权益
                            <i></i>
                        </a>
                        <a href="#">更多
                            <i></i>
                        </a>
                        <a href="#">视频内容
                        </a>
                    </div>
                    <div class="group1">
                        <a href="#">每日签到</a>
                        <a href="#">我的订单</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3、logo-search-cart  -->
        <div class="operation">
            <div class="wrap">
                <a href="#">
                    <img src="./img/logo_new.png" alt="">
                </a>
    
                <div class="search">
                    <i></i>
                    <input type="text" placeholder="精品男装">
                    <span class="search-bottom"></span>
                </div>
                <a href="#" class="cart">
                    <i></i>
                    <span>购物车</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 右侧导航栏 -->
    <div class="right-sidebar">
        <a href="">
            <i></i>
            <span>签到</span>
        </a>
        <a href="">
            <i></i>
            <span>购物车</span>
        </a>
        <a href="">
            <i></i>
            <span>APP</span>
        </a>
        <a href="" class="top">
            <i></i>
            <span>TOP</span>
        </a>
    </div>

    <!-- 商品顶部 -->
    <div id="top">
        <div class="tabbar">
            <div class="wrap">
                <div class="category">
                    <div class="lineicon">
                        <i class="first"></i>
                        <i></i>
                        <i></i>
                    </div>
                    <span>所有分类</span>
                    <ul class="categories">
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>

                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                        <li class="first">
                            <a href="#" >
                                <img src="./img/icon-category-mrcz.png" alt="">
                                <img src="./img/icon-category-mrcz-active.png" class="active" alt="">
                                <span>美容彩妆</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <ul class="list">
                    <li ><a href="#" class="active">首页</a></li>
                    <li><a href="#">海外直购</a></li>
                    <li><a href="#">工厂店</a></li>
                    <li><a href="#">品质奶粉</a></li>
                    <li><a href="#">人气面膜</a></li>
                    <li><a href="#">充值</a></li>
                </ul>
            </div>
        </div>
        <div class="banner">
            <a href="" class="swiper">
                <img src="./img/banner.jpg" alt="">
                <!-- 轮播图按钮，设置在a标签元素内，
                    因为碰到图片范围内就显示，移除就display：none隐藏 

                    如果同级 .swiper:hover+control
                -->
                <span class="controller wrap">
                    <i class="prev"></i>
                    <i class="next"></i>
                </span>
                <span class="dots wrap">
                    <span class="dot">
                        <i class="active"></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </span>
                </span>
            </a>

            <div class="service">
                <div class="blur"></div>
                <ul class="wrap">
                    <li><a href="#">考拉自营</a></li>
                    <li><a href="#">全球直采</a></li>
                    <li><a href="#">假一赔十</a></li>
                    <li><a href="#">售后无忧</a></li>
                    <li class="right"><a href="#">新人下载APP，领10元满减红包</a></li>
                </ul>
            </div>
        </div>
       
    </div>
    <!-- 主要商品 -->
    <div id="main">
        <div class="brand wrap clear-fix">
            <div class="brand-left">
                <a href="#">
                    <img src="./img/brand-left-img.jpg" alt="">
                    <span class="control">
                            <i class="prev-2"></i>
                            <i class="next-2"></i>
                    </span>
                </a>
                <div class="progress"></div>
                <a class="info">
                    <span class="title">百草味</span>
                    <span class="desc">中国零售品牌</span>
                 </a>
            </div>
            <ul class="brand-right">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <br>
        <br>
    </div>
    <!-- 尾部 -->
    <div id="footer"></div>

</body>
</html>